<template>
  <!-- 该组件只是简单实现了本地iconfont和element icon的模版  fontawesome仍然需要标签引用-->
  <i
    v-if="!svg"
    :class="className"
    :style="iconStyle"
    @click="clickHandle"
    v-html="text"
  />
  <svg
    v-else
    aria-hidden="true"
    :style="iconStyle"
    @click="clickHandle"
  >
    <use :xlink:href="`#${content}`" />
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    content: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 18
    },
    width: {
      type: Number,
      default: 20
    },
    height: {
      type: Number,
      default: 20
    },
    color: {
      type: String,
      default: ''
    },
    svg: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      text: ''
    }
  },
  computed: {
    iconStyle() {
      return (
        'font-size: ' +
        this.size +
        'px; color: ' +
        this.color +
        '; width: ' +
        this.width +
        'px; height: ' +
        this.height +
        'px; font-style: normal;'
      )
    },
    className() {
      if (this.content.indexOf('fa-') !== -1) {
        return this.content.indexOf('fa ') === 0 ? this.content : ['fa', this.content]
      } else if (this.content.indexOf('el-icon-') !== -1) {
        return this.content
      } else if (this.content.indexOf('#') !== -1) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.text = this.content
        return 'iconfont'
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.text = this.content
        return ''
      }
    }
  },
  methods: {
    clickHandle() {
      this.$emit('click')
    }
  }
}
</script>
